<template>
	<view class="puboffer conbox designs">
		<view class="offer_price">
			<view class="line_title">
				<!-- <image src="../../static/images/design/company/icon_linetitle.png" alt=""> -->
				<view class="line_prompt">10秒估算<text class="text_main_color">{{ constant.oemObj.promptText }}报价</text></view>
			</view>
			<view class="sub_form">
				<view class="radiom">
					<view class="radiom_nei">
						<!-- ../../static/images/design/radom.gif -->
						<image :src="randomImgUrl"></image>
					</view>
				</view>
				<view class="cost_list">
					<view class="item">
						<div>
							<text>{{ constant.oemSource == 3 ? '客厅' : '人工费' }}：</text><text>?元</text>
						</div>
						<div>
							<text>{{ constant.oemSource == 3 ? '餐厅' : '设计费' }}：</text><text>?元</text>
						</div>
					</view>
					<view class="item">
						<div>
							<text>{{ constant.oemSource == 3 ? '卧室' : '材料费' }}：</text><text>?元</text>
						</div>
						<div>
							<text>{{ constant.oemSource == 3 ? '书房' : '质检费' }}：</text><text>?元</text>
						</div>
					</view>
				</view>

				<!--  #ifdef H5 -->
				<view class="atric_input">
					<input placeholder="请输入房屋面积" type="number" :maxlength="4" v-model="areaValue" />
					<text>m²</text>
				</view>
				<view class="atric_input">
					<input placeholder="请输入手机号，短信获取报价结果" type="number"
						v-model="mobile_phone"
						:maxlength="11">
				</view>
				<view class="artic_sub" @click="applyNow">{{btnTxt}}</view>
				<!--  #endif -->
				<!--  #ifdef MP-WEIXIN -->
				<view class="atric_input">
					<input placeholder="请输入房屋面积" type="number" :maxlength="4" v-model="areaValue" />
					<text>m²</text>
				</view>
                <get-phone-number @cbFn="prebook">
				    <view class="artic_sub">{{btnTxt}}</view>
			    </get-phone-number>
				<!--  #endif -->
				<view class="alert_msg">我们承诺提供该项<text>免费服务，绝不产生任何费用</text></view>
			</view>
		</view>
	</view>
</template>

<script>

import { mobileReg, areaReg } from '@/utils/tools/validate'
import { submitReservation } from '@/api/shop'
import { setTimeout } from 'timers'
import getPhoneNumber from '@/pages/components/getPhoneNumber'

export default {
	name: 'Puboffer',
	props: {
		mobile: {
			type: String,
			default: ''
		},
		ownerUserId: [String, Number]
	},
	components: {
		getPhoneNumber
	},
	data() {
		return {
			randomImgUrl: this.$constant.imgUrl + 'design/radom.gif',
			prebook_source: '智能报价',
			mobile_phone: '',
			areaValue: '',
			constant: this.$constant,
			btnTxt: this.$constant.oemSource == 3 ? '报名估值' : '立即报价'
		}
	},
	created() {
		// #ifdef H5
		this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
		// #endif
	},
	watch: {
		mobile(val) {
			this.mobile_phone = val
		}
	},
	methods: {
		showToast(title) {
			uni.showToast({
				title,
				icon: 'none'
			})
		},
		prebook() {
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile) {
				return
			}
			if (!this.areaValue) {
				this.showToast('请输入房屋面积！')
				return
			} else if (!areaReg.test(this.areaValue)) {
				this.showToast('请输入正确的房屋面积！')
				return
			}
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))

			const params = {
				mobile_phone: mobile,
				prebook_source: '智能报价',
				square: this.areaValue,
				owner_user_id: this.ownerUserId
			}
			// if (this.currentQuery.share_user_id) {
			// 	params.share_user_id = this.currentQuery.share_user_id
			// }
			// if (this.currentQuery.p_share_user_id) {
			// 	params.p_share_user_id = this.currentQuery.p_share_user_id
			// }
			submitReservation(params).then(res => {
				this.btnTxt = '申请成功'
				uni.showToast({
					title: '申请成功',
					icon: 'success'
				})
			})
		},
		applyNow() {
			let mobile = this.mobile_phone, area = this.areaValue

			if (mobile.length === 0) {
				this.showToast('请输入手机号码！')
			} else if (mobile.length !== 11) {
				this.showToast('请输入完整的手机号码！')
			} else if (!mobileReg.test(mobile)) {
				this.showToast('请输入正确的手机号码！')
			} else if (area.length === 0) {
				this.showToast('请输入房屋面积！')
			} else if (!areaReg.test(area)) {
				this.showToast('请输入正确的房屋面积！')
			} else {
                	let params = {
					mobile_phone: mobile,
					prebook_source: this.prebook_source,
					square: this.areaValue,
					owner_user_id: this.ownerUserId
				}
				submitReservation(params).then((res) => {
					uni.showToast({
						title: '申请成功',
						icon: 'success'
					})
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">

.puboffer{
  overflow: hidden;
}

.alert_msg {
    text-align: center;
    font-size: 24px;
    line-height: 1;
}

.alert_msg text {
    color: #ff9000;
}

.sub_form .artic_sub {
    margin-top: 20px;
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
    float: left;
    line-height: 90px;
    height: 90px;
    border-radius: 10px;
    background: -webkit-linear-gradient(left top, rgb(255, 144, 0), rgb(255, 102, 0));
    text-align: center;
    font-size: 36px;
    color: white;
}

.artic_sub image {
    width: 100%;
    height: 100%;
    float: left;
}

.atric_input {
    background: #F5F5F5;
    width: 100%;
    height: 90px;
    font-size: 30px;
    line-height: 90px;
    color: #C9C9C9;
    border: 2px solid rgb(204, 204, 204);
    margin-top: 30px;
    border-radius: 10px;
    position: relative;
    .phone_btn {
        display: flex;
        text-align: center;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        padding: 0 25px;
        height:60px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(204,204,204,1);
        opacity:0.9;
        border-radius:30px;
        font-size:26px;
        color:rgba(51,51,51,1);
    }
}

.atric_input input {
    width: 85%;
    height: 70px;
    float: left;
    margin-top: 10px;
    border: none;
    background: #F5F5F5;
    padding-left: 20px;
    color: rgb(153, 153, 153);
}

.atric_input text {
    margin-right: 33px;
    color: black;
}

.designs {
    background: #f5f5f5;
}

.sub_form .cost_list {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 30px 113px 0;
}

.sub_form .cost_list .item {
    width: 172px;
    text-align: center;
    font-size: 28px;
    color: #666666;
}

.sub_form .cost_list .item .txt {
    color: #999999;
}

.offer_price {
    width: 100%;
    height: auto;
    background: white;
    margin-top: 20px;
    padding-bottom: 30px;
}

.offer_price .line_title {
    width: 94%;
    height: 80px;
    margin-left: 3%;
    position: relative;
}

.offer_price .line_title image {
    width: 100%;
    height: 100%;
}

.offer_price .line_title:before {
    content: '';
    width: 100%;
    position: absolute;
    top: 50%;
    border-bottom: 2px solid #ddd;
}

.offer_price .line_title .line_prompt {
    text-align: center;
    position: absolute;
    top: 0;
    right: 14%;
    bottom: 0;
    left: 14%;
    font-size: 34px;
    background-color: #fff;
    line-height: 80px;
}

.offer_price .sub_form {
    width: 94%;
    height: auto;
    margin-left: 3%;
    margin-right: 3%;
}

.sub_form .radiom {
    width: 100%;
    height: 140px;
    background: #E7E7E7;
    border-radius: 10px;
}

.sub_form .radiom_nei {
    text-align: right;
    width: 97%;
    height: 120px;
    background: #D3D3CB;
    margin: 10px;
    border-radius: 10px;
}

.sub_form .radiom_nei image {
    width: 254px;
    height: 76px;
    margin: 22px;
}
</style>
